<template>
  <view
    class="promation-active-wrap"
  >
    <swiper
      class="banner__swiper"
      :indicator-dots="list.length > 1 ? true : false"
      indicator-color="#FFFFFF"
      indicator-active-color="#FEDD00"
      :autoplay="true"
    >
      <swiper-item v-for="(item, index) in list" :key="index" @tap="handleToDetail(item)">
        <view class="banner__swiper--item">
          <view
            class="banner__swiper--item-img"
            :style="'background: url(' + item.thumb + ') no-repeat center'"
          ></view>
        </view>
      </swiper-item>
    </swiper>
  </view>
</template>

<script>
import { bannerBg } from '@/tool/static-img';

export default {
  props: {
    list: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      bannerBg,
    };
  },
  methods: {
    handleToDetail(item) {
      this.$emit('handleToDetail', item);
    },
  },
};
</script>

<style lang="less">
.promation-active-wrap {
  padding: 20rpx 0;
  .banner {
    &__swiper {
      width: 100%;
      height: 160rpx;
      margin: auto;
      overflow: hidden;
      &--item {
        width: 100%;
        height: 100%;
        padding: 0 30rpx;
        &-img {
          height: 100%;
          width: 690rpx;
          border-radius: 12rpx;
          background-size: cover !important;
        }
      }
    }
  }
}
</style>
